<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		li{
			list-style: none;
		}
		body{
			background: #FF7C87 url() 0 0 no-repeat;
		}
		ul{
			width: 360px;
			height: 270px;
			background: #99D1EB url() 0 0 no-repeat;
			margin: 100px auto 0px;
			padding: 30px;
			padding-right: 20px;
			border-radius: 5px;
			box-shadow: 0px 4px 0px #039BE2;
		}
		ul li{
			width: 80px;
			height: 45px;
			background: #FFFFFF url() 0 0 no-repeat;
			float: left;
			margin-right: 10px;
			margin-bottom: 10px;
			line-height: 45px;
			text-align: center;
			color: #8E8B8F;
			border-radius: 5px;
			box-shadow: 0px 4px 0px #72A3B9;
		}
		.show{
			width: 250px;
			text-align: right;
			background: #7AA7BB url() 0 0 no-repeat;
			color: #fff;
			padding-right: 10px;
			font-weight: 800;
			font-size: 18px;
			box-shadow: 0px 0px 0px #72A3B9;
			height: 49px;
			box-shadow:0px 5px 0px #608392 inset;   
		}
		.clear{
			background: #FF9FA9 url() 0 0 no-repeat;
			color: #fff;
			box-shadow: 0px 4px 0px #FF7C87;
			
		}
		.res{
			background: #F2FF93 url() 0 0 no-repeat;
			box-shadow: 0px 4px 0px #9BA64F;
		}

		.yunsuan{
			background: #FFF2F5 url() 0 0 no-repeat;
		}


	</style>
</head>
<body>
	<ul>
		<li class="clear">C</li>
		<li class="show">76546</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li class="yunsuan">+</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li class="yunsuan">-</li>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li class="yunsuan">/</li>
		<li>0</li>
		<li>.</li>
		<li class="res">=</li>
		<li class="yunsuan">*</li>
	</ul>
</body>
</html>